<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10+52}px`}">
		<view class="myPages__mbox" :style="{height: `${search.top+search.height+10}px`}"></view>
		<myHeard :search="search" :isTrue="false" :title="title" @goPath="goBack"></myHeard>

		<view class="tabs" :style="{top:`${search.top+search.height+10}px`}">
			<block v-for="(item,index) in accessoriesArr" :key="index">
				<view class="tabsItems" @click.stop="changeTabs(index)">
					<view :class="tabIndex==index?'tab active':'tab'">{{item.partName}}</view>
					<view :class="tabIndex==index?'tab_hen tab_hen--active':'tab_hen'"></view>
				</view>
			</block>
		</view>
		<!-- <view class="myPages__swperMain" v-if="aftersaleArr.length==0">
			<image class="kong" src="/static/images/oderkongIcon.png"></image>
		</view> -->

		<view class="myPages__swperMain">
			<view class="myPages__swperMainItem" v-for="(item,index) in aftersaleArr">
				<view @click.stop="ff_previewImage(item.coverImg)" class="myPages__swperMainItemHeard">
					<image :src="item.coverImg"></image>
				</view>
				<view class="myPages__swperMainItemBottomBox">
					<view class="myPages__swperMainItemBottomTopBox">{{item.goodsName}}</view>
					<view class="myPages__swperMainItemBottomBottomBox">
						<view class="myPages__swperMainItemBottomBottomLeftBox">
							<span>￥</span>
							<span>{{item.skuPrice}}</span>
						</view>
						<view class="myPages__swperMainItemBottomBottomRightBox">


							<!-- <image v-if="item.mySum" @click.stop="jddFun(index)" src="/static/images/JiangIcon.png"></image>
							<span v-if="item.mySum">{{item.mySum}}</span> -->
							<image @click.stop="addFun(index)" src="/static/images/JiaIcon.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Dib8aoIconBox" @click="goTabs">
			<view class="Dib8aoBox">{{aftersaleSum | ff_content}}</view>
			<image class="Dib8aoIconImg" src="/static/images/Dib8aoIcon.png"></image>
			<span>手袋</span>
		</view>
		<!-- 删除购物车-->
		<u-overlay :show="isShow" @click="isShow = false">
			<view @click.stop="" class="warp">
				<view v-if="aftersaleSum" class="warpText">{{content}}</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="isShow = false">取消</span>
					<span class="warpButtomYes" @click.stop="confirm">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 添加成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui" >
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>加入购物车成功</span>
			</view>
		</u-overlay>


	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '购买配件',
				tabIndex: 0,
				partId: '',
				accessoriesArr: [],
				aftersaleArr: [],
				salesShow: false,
				reomveOrderNo: '',
				reomveIndex: 0,
				pageNum: 1,
				pageSize: 5,
				show: false,
				isShow: false,
				isShowDui: false,
				serviceNo: '',
				content: '是否将商品移出购物袋',
				aftersaleIndex: 0,
				aftersaleSum: 0
			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.initAccessories();

		},
		onShow() {

			// this.pageNum = 1;
			// this.aftersaleArr = [];
			// this.getOrderServiceWxList();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		filters: {
			ff_content(sum){
				return sum>99?99:sum;
			},
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(
						formatNumber)
					.join(':')
			}
		},
		onReachBottom() {
			this.pageNum++;
			this.getOrderServiceWxList();
		},
		methods: {
			confirm() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				this.$api.mallCartWxRemove([this.aftersaleArr[this.aftersaleIndex].goodsId]).then(res => {
					let nowAftersaleArr = JSON.parse(JSON.stringify(this.aftersaleArr));
					nowAftersaleArr[this.aftersaleIndex].mySum = 0;
					this.aftersaleArr = JSON.parse(JSON.stringify(nowAftersaleArr));
					this.isShow = false;
					uni.showToast({
						icon: 'none',
						title: res.msg,
						mask: true
					})


				})


			},
			goTabs() {
				uni.switchTab({
					url: '/pages/handbag/index'
				})
			},
			initCat() {

				this.$api.mallCartWxList().then(res => {
					this.aftersaleSum = 0
					if (res.code == 200) {
						setTimeout(()=>{
							this.isShowDui = false;
						},1500)
						res.data.cartList.forEach(item => {
							this.aftersaleSum = this.aftersaleSum + item.goodsNum;
						})
					}
				});
			},
			jddFun(index) {
				this.aftersaleIndex = index;
				let nowAftersaleArr = JSON.parse(JSON.stringify(this.aftersaleArr));

				nowAftersaleArr[index].mySum--;
				if (nowAftersaleArr[index].mySum > 0) {
					nowAftersaleArr[index].mySum = nowAftersaleArr[index].mySum;
				} else {
					this.isShow = true;
					return
				}
				this.aftersaleArr = JSON.parse(JSON.stringify(nowAftersaleArr));


				let req = {
					goodsIds: [this.aftersaleArr[index].goodsId],
					goodsNum: this.aftersaleArr[index].mySum,
					productImg: this.aftersaleArr[index].coverImg,
					productType: 20
				}

				this.mallCartWxAdd(req)

			},
			addFun(index) {
				let nowAftersaleArr = JSON.parse(JSON.stringify(this.aftersaleArr));

				nowAftersaleArr[index].mySum++;
				if (nowAftersaleArr[index].mySum > nowAftersaleArr[index].stockNum) {
					nowAftersaleArr[index].mySum = nowAftersaleArr[index].stockNum;
					uni.showToast({
						icon: 'none',
						title: '已达到库存数!'
					})
				} else {
					nowAftersaleArr[index].mySum = nowAftersaleArr[index].mySum;
				}
				this.aftersaleArr = JSON.parse(JSON.stringify(nowAftersaleArr));

				let req = {
					goodsIds: [this.aftersaleArr[index].goodsId],
					goodsNum: 1,
					productImg: this.aftersaleArr[index].coverImg,
					productType: 20
				}
				this.mallCartWxAdd(req)



			},
			mallCartWxAdd(req) {
				this.$api.mallCartWxAdd(req).then(res => {
					if (res.code == 200) {
						this.isShowDui = true;
						this.initCat();
					}
				})
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			initAccessories() {
				this.$api.mallPartWxList().then(res => {
					if (res.code == 200) {
						console.log('res---->', res)
						this.accessoriesArr = res.data;
						this.getOrderServiceWxList();
						this.initCat();

					}
				})
			},
			getOrderServiceWxList() {
				console.log('this.accessoriesArr[this.tabIndex]--->', this.accessoriesArr[this.tabIndex])
				this.partId = this.accessoriesArr[this.tabIndex].partId;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallGoodsWxList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					partId: this.partId
				}).then(res => {
					if (res.code == 200) {
						console.log(res.rows)
						let myRos = res.rows;
						myRos.forEach(item => {
							item.mySum = 0;
						})
						this.aftersaleArr = [...this.aftersaleArr, ...myRos];
						console.log('this.aftersaleArr--->', this.aftersaleArr)
					}
				})
			},
			reomve(orderNo, index) {
				this.show = true;
				this.reomveOrderNo = orderNo;
				this.reomveIndex = index;
			},
			ff_salesyes() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.serviceReasonWxCancel({
					serviceNo: this.serviceNo
				}).then(res => {
					if (res.code == 200) {
						this.salesShow = false;
						if (res.msg == '操作成功') {

							this.pageNum = 1;
							this.aftersaleArr = [];
							this.getOrderServiceWxList();

						}



						uni.showToast({
							icon: 'none',
							title: res.msg,
							mask: true
						});


					}
				})

			},
			ff_yes() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxRemove({
					orderNo: this.reomveOrderNo
				}).then(res => {
					if (res.code == 200) {
						this.show = false;
						let nowOrderList = JSON.parse(JSON.stringify(this.aftersaleArr))
						nowOrderList.splice(this.reomveIndex, 1);
						this.aftersaleArr = JSON.parse(JSON.stringify(nowOrderList))

						uni.showToast({
							icon: 'none',
							title: res.msg,
							mask: true
						});
					}

				})
			},
			ff_salesShow(serviceNo) {
				this.salesShow = true;
				this.serviceNo = serviceNo;

			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			changeTabs(index) {
				this.tabIndex = index;
				this.pageNum = 1;
				this.aftersaleArr = [];
				this.getOrderServiceWxList();
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;

		.myPages__swperMainItem {
			width: 338rpx;
			height: 402rpx;
			border-radius: 40rpx;
			overflow: hidden;
			flex: 0 0 338rpx;
			margin-bottom: 10rpx;
		}

		.myPages__swperMainItem:nth-child(2n) {
			margin-left: 10rpx;
		}

		.myPages__swperMainItemHeard {
			width: 338rpx;
			height: 264rpx;
			opacity: 1;
			background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				display: inline-block;
				height: 264rpx;
				width: 264rpx;
			}
		}

		.myPages__swperMainItemBottomBox {
			height: 138rpx;
			width: 100%;
			background: #fff;
			padding: 20rpx 24rpx 24rpx 24rpx;
			box-sizing: border-box;
		}

		.myPages__swperMainItemBottomTopBox {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #2B2B33;
			font-weight: bold;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.myPages__swperMainItemBottomBottomBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
		}

		.myPages__swperMainItemBottomBottomRightBox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				display: inline-block;
				width: 48rpx;
				height: 48rpx;
			}

			span {
				display: inline-block;
				height: 38rpx;
				font-size: 32rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 38rpx;
				color: #2B2B33;
				margin: 0 16rpx;
			}
		}

		.myPages__swperMainItemBottomBottomLeftBox {
			span:nth-child(1) {
				display: inline-block;
				height: 32rpx;
				font-size: 22rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 32rpx;
				color: #2B2B33;
				font-weight: bold;
			}

			span:nth-child(2) {
				display: inline-block;
				height: 38rpx;
				font-size: 32rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 38rpx;
				color: #2B2B33;
			}
		}

		.myPages__mbox {
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
		}

		.myPages__swperMainItemsHeardRight {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: 400;
			line-height: 34rpx;
			color: #B0B1BB;
		}

		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}

		.warpText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}

		.overlayBox {
			width: 274rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;

			}
		}


		.warpButtom {
			display: flex;

			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}

			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.Dib8aoBox {
			width: 36rpx;
			height: 36rpx;
			background: #F0414D;
			border-radius: 50%;
			opacity: 1;
			text-align: center;
			font-size: 26rpx;
			font-family: 蘋方-簡;
			font-weight: normal;


			line-height: 36rpx;
			position: absolute;
			top: 38rpx;
			color: #FFFFFF;
			left: 128rpx;
		}

		.Dib8aoIconBox {
			width: 750rpx;
			height: 152rpx;
			background: rgba(247, 248, 252, 1);
			box-shadow: 0px -6rpx 12rpx rgba(228, 228, 245, 0.6);
			opacity: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: 24rpx;
			span{
				display: inline-block;
				font-weight: bold !important;
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 40rpx;
				color: #2B2B33;
				position: absolute;
				top: calc(50% - 14rpx);
				left: 50%;
				transform: translate(-50%,-50%);
			}

			.Dib8aoIconImg {
				display: inline-block;
				width: 622rpx;
				height: 88rpx;
			}
		}

		.myPages__swperMain {
			width: 100%;
			padding: 32rpx;
			padding-top: 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 190rpx;
		}

		.kong {
			width: 450rpx;
			height: 450rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.myPages__swperMainItems {
			width: 100%;
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 32rpx;
		}

		.myPages__swperMainItemsHeard {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.myPages__swperMainItemsEndRightBox {
			span {
				width: 168rpx;
				font-size: 26rpx;
				font-family: 蘋方-簡;
				display: inline-block;
				height: 68rpx;
				line-height: 64rpx;
				border: 2rpx solid #f0414d;
				color: #f0414d;
				text-align: center;
				box-sizing: border-box;
				border-radius: 40rpx;
			}

			span:nth-child(2) {
				color: #FFFFFF;
				background-color: #f0414d;
				margin-left: 16rpx;
			}

		}

		.myPages__swperMainItemsEnd {
			height: 72rpx;
			display: flex;
			justify-content: space-between;
		}

		.myPages__swperMainItemsEndLeftBox {
			color: #B0B1BB;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: 400;
		}

		.myPages__swperMainItemsBodys {
			padding: 16rpx 0;
		}

		.myPages__swperMainItemsBodysItem {
			display: flex;
			padding: 8rpx 0;
		}

		.myPages__swperMainItemsBodysItemLeftBox {
			width: 152rpx;
			flex: 0 0 152rpx;
			height: 152rpx;
			border-radius: 40rpx;
			overflow: hidden;

			image {
				width: 152rpx;
				height: 152rpx;
			}
		}

		.myPages__swperMainItemsBodysItemRightBox {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			p {
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #2B2B33;
			}

			p:nth-child(2) {
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #7B7D8D;
			}
		}

		.myPages__swperMainItemsHeardLeft--fk {
			span {
				color: #F0414D !important;
			}

		}

		.myPages__swperMainItemsHeardLeft--geis {
			span {
				color: #000 !important;
			}
		}

		.myPages__swperMainItemsHeardLeft {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			span {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: 500;
				line-height: 40rpx;
				color: #B0B1BB;
				margin-left: 6rpx;
			}
		}

		.tabs {
			position: fixed;
			left: 0;
			width: 100%;
			height: 102rpx;
			background-color: #fff;
			border-radius: 0px 0px 40rpx 40rpx;
			display: flex;
			padding: 0 32rpx;
			box-sizing: border-box;
			justify-content: space-between;
		}

		.tabsItems {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.tab_hen {
			width: 32rpx;
			height: 6rpx;
			background: transparent;
			opacity: 1;
			border-radius: 4rpx;
			margin: 8rpx auto;
		}

		.tab_hen--active {
			background: #F0414D !important;
		}

		.tab {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: 400;
			color: #7B7D8D;
			text-align: center;
		}

		.active {
			font-weight: 550 !important;
			color: #000 !important;
		}
	}
</style>
